<script setup>

const props = defineProps({
    menu:{
        type:Object,
        required:true,
    },
    basePath:{
        type:String,
        required:true,
    },
})


</script>

<template>
    <el-sub-menu v-if="menu.children" :index="basePath">
        <template #title>
            <el-icon><component class="icon" :is="menu.meta.icon"/></el-icon>
            <span>{{ menu.meta.title }}</span>
        </template>
        <template v-for="el in menu.children">
            <sidebarItem v-if="!el.hidden" :menu="el" :basePath="basePath + '/'+ el.path"/>
        </template>
    </el-sub-menu>

    <!-- <el-menu-item v-else-if="menu.meta.link">{{ menu.meta.title }}</el-menu-item> -->
    
    <el-menu-item v-else :index="basePath">
        <el-icon><component class="icon" :is="menu.meta.icon"/></el-icon>
        <span>{{ menu.meta.title }}</span>
    </el-menu-item>
        
</template>

<style scoped lang='scss'>

</style>